<template>
    <div class="art-full-height">
        <ElCard class="art-table-card" shadow="never" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
            <div class="header">
                账单流水
            </div>
            <!-- <el-form :model="searchForm" ref="searchFormRef" label-width="auto" style="padding-bottom: 1.5rem">
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="状态：" prop="status">
                            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable @change="selectChange">
                                <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form> -->
            <ArtTable :data="tableData" selection :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize"
                :total="pageTotal" @current-change="currentChange" @size-change="sizeChange">
                <template #default>
                    <el-table-column label="变动时间" prop="createTime" />
                    <el-table-column label="备注" prop="remark" />
                    <!-- 提现减 其余加 -->
                    <el-table-column label="变动金额" prop="balance" #default="scope" align="center">
                        <span :style="{ color: scope.row.flowType === 2 ? '#f56c6c' : '#67c23a' }">
                            {{ scope.row.flowType === 2 ? '-' + scope.row.amount / 100 : '+' + scope.row.amount / 100 }}
                        </span>
                    </el-table-column>
                    <el-table-column label="类型" prop="flowType" align="center" #default="scope">
                        {{ scope.row.flowType === 1 ? '订单佣金' : scope.row.flowType === 2 ? '账户提现' :
                            scope.row.flowType === 3 ? '提现驳回，金额返还' : '' }}
                    </el-table-column>
                    <el-table-column label="账户余额" prop="amount" align="center" #default="scope">
                        {{ scope.row.balance / 100 }}
                    </el-table-column>
                    <!-- <el-table-column label="状态" prop="flowStatus" align="center">
                        <template #default="scope">
                            <el-tag :type="getTagType(scope.row.flowStatus)">
                                {{ scope.row.flowStatus < 5 ? buildTagText(scope.row.flowStatus) : '' }} </el-tag>
                        </template>
</el-table-column> -->
                </template>
            </ArtTable>
        </ElCard>
    </div>
</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import { transactionHistory } from '@/api/agent'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const userInfo: any = computed(() => userStore.getUserInfo)

const searchForm = reactive<any>({
    status: '',
    withdrawalStatusList: []
})
const showSearchBar = ref(false)
const statusList: any = [
    {
        value: '0',
        label: '待审核'
    },
    {
        value: '1',
        label: '审核通过'
    },
    {
        value: '2',
        label: '已打款'
    },
    {
        value: '3',
        label: '审核驳回'
    },
    {
        value: '4',
        label: '打款失败'
    }
]
const searchFormRef = ref<FormInstance>()
const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
const tableData = ref([])

const getData = async () => {
    try {
        tableLoading.value = true
        const res = await transactionHistory({
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            id: userInfo.value.id,
            withdrawalStatusList: searchForm.withdrawalStatusList,
        })
        if (res.code === '0') {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        }
    } catch { } finally {
        tableLoading.value = false
    }
}

const selectChange = (e: any) => {
    searchForm.withdrawalStatusList = [Number(e)]
    getData()
}


const getTagType = (status: number) => {
    switch (status) {
        case 1:
            return 'info'
        case 2:
            return 'primary'
        case 3:
            return 'danger'
    }
}

const buildTagText = (status: number) => {
    let text = ''
    if (status === 1) {
        text = '待结算'
    } else if (status === 2) {
        text = '已结算'
    } else if (status === 3) {
        text = '已冻结'
    }
    return text
}

const currentChange = (val: number) => {
    pageNum.value = val
    getData()
}

const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
    getData()
}

onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.header {
    margin-bottom: 20px;
    font-size: 25px;
}
</style>